<template>
  <div
    class="fugailv"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="zhanbi">
      <div id="zhanbi">加载中</div>
      <div class="title">
        <div class="he">
          <div class="xiang">{{activeItem.name}}</div>
          <div class="fugai">总监督覆盖率</div>
        </div>
      </div>
    </div>
    <div class="gequ">
      <div class="title">各区县的监督覆盖率</div>
      <div id="gequ">加载中</div>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getFuGaiLv, getGeQuXianFuGaiLv } from "@/api/fengzhuanye";

export default {
  name: "FuGaiLv",
  data() {
    return {
      loading: true,
      activeItem: { val: "01", name: "公共卫生" },
      fugailv: {
        zonggailv: 0.99,
        diquArr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      }
    };
  },
  methods: {
    async getData() {
      this.loading = true;
      // try {
      var json = (
        await getFuGaiLv(this.activeItem.val, this.$store.state.YEAR, 131000)
      ).data.data;
      var json2 = (
        await getGeQuXianFuGaiLv(
          this.activeItem.val,
          this.$store.state.YEAR,
          131000
        )
      ).data.data;
      console.log(json);

      //
      // } catch (error) {
      //   var json = {year: "2019",zylb: "01",monitoringCoverageAll: 0.9369 };
      //  var json2 = [{"monitoringCoverage":0.985,"orgName":"廊坊市","year":"2019","orgCode":"131000","zylb":"01"},{"monitoringCoverage":0.9934,"orgName":"安次区","year":"2019","orgCode":"131002","zylb":"01"},{"monitoringCoverage":0.9708,"orgName":"广阳区","year":"2019","orgCode":"131003","zylb":"01"},{"monitoringCoverage":0.8375,"orgName":"固安县","year":"2019","orgCode":"131022","zylb":"01"},{"monitoringCoverage":0.9466,"orgName":"永清县","year":"2019","orgCode":"131023","zylb":"01"},{"monitoringCoverage":0.9596,"orgName":"香河县","year":"2019","orgCode":"131024","zylb":"01"},{"monitoringCoverage":0.6786,"orgName":"大城县","year":"2019","orgCode":"131025","zylb":"01"},{"monitoringCoverage":0.9514,"orgName":"文安县","year":"2019","orgCode":"131026","zylb":"01"},{"monitoringCoverage":0.993,"orgName":"大厂回族自治县","year":"2019","orgCode":"131028","zylb":"01"},{"monitoringCoverage":0.9448,"orgName":"霸州市","year":"2019","orgCode":"131081","zylb":"01"},{"monitoringCoverage":0.9017,"orgName":"三河市","year":"2019","orgCode":"131082","zylb":"01"}]
      // }
      this.loading = false;

      this.fugailv.zonggailv = (json.monitoringCoverageAll * 100).toFixed(2);
      this.fugai = this.drawCircular("zhanbi", this.fugailv.zonggailv);
      json2.forEach(val => {
        switch (val.orgName) {
          case "廊坊市":
            this.fugailv.diquArr[0] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "安次区":
            this.fugailv.diquArr[1] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "广阳区":
            this.fugailv.diquArr[2] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "固安县":
            this.fugailv.diquArr[3] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "永清县":
            this.fugailv.diquArr[4] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "香河县":
            this.fugailv.diquArr[5] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "大城县":
            this.fugailv.diquArr[7] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "文安县":
            this.fugailv.diquArr[6] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "大厂回族自治县":
            this.fugailv.diquArr[8] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "霸州市":
            this.fugailv.diquArr[9] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          case "三河市":
            this.fugailv.diquArr[10] =
              (val.monitoringCoverage * 100).toFixed() > 100
                ? "100"
                : (val.monitoringCoverage * 100).toFixed();
            break;
          default:
            break;
        }
      });
      this.diqu = this.drawLine();
    },
    drawLine() {
      const fugaishu = this.fugailv.diquArr.reverse();
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("gequ"));
      // 绘制图表
      let option = {
        grid: {
          left: "10%",
          top: "0%",
          right: "2%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: "none",
            axisLine: "none",
            offset: "27",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            data: [
              "市辖区",
              "安次区",
              "广阳区",
              "固安县",
              "永清县",
              "香河县",
              "文安县",
              "大城县",
              "大厂回族自治县",
              "霸州市",
              "三河市"
            ].reverse()
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#07ccff",
                fontSize: "12"
              },
              formatter: function(val) {
                return `${val}%`;
              }
            },
            data: fugaishu
          }
        ],
        tooltip: {
          trigger: "item",
          formatter: function(e) {
            if (e.seriesIndex === 0) {
              return `${e.name}: ${e.value}%`;
            }
          }
        },
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: fugaishu,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#6dcc54"
                  }, //柱图渐变色
                  {
                    offset: 0.5,
                    color: "#3acc9b"
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: "#00cffc"
                  } //柱图渐变色
                ])
              }
            },
            z: 1
          },
          {
            name: "外框",
            type: "bar",
            // barGap: '-100%',
            // barCateGoryGap:50,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#36335e"
              }
            },
            z: 0
          }
        ]
      };
      myChart.setOption(option);
      return myChart;
    },
    drawCircular(id, value) {
      let e = value;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      let option = {
        title: {
          show: true,
          text: e + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "12",
            color: "#07ccff",
            fontWeight: "normal"
          }
        },
        color: ["#07ccff", "#0f2d69"],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}%"
        },

        series: {
          name: "",
          type: "pie",
          radius: ["80%", "100%"],
          hoverAnimation: false,
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: e,
              name: "覆盖率"
            },
            {
              value: 100 - e,
              name: "未覆盖"
            }
          ]
        }
      };
      myChart.setOption(option);
      return myChart;
    }
  },
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      this.diqu.resize();
      this.fugai.resize();
    });
    Bus.$on("topNavChange", e => {
      this.activeItem = e;
      this.getData();
    });
  }
};
</script>

<style scoped lang="less">
.fugailv {
  border: 0.0625rem solid #2c4daa;
  display: grid;
  grid-template-rows: repeat(4, 25%);

  .zhanbi {
    display: flex;
    color: #07ccff;
    align-items: center;

    #zhanbi {
      flex: 1;
      height: 80%;
      padding: 3%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(120deg, #155799, #159957);
      background-size: 200% 100%;
      background-clip: text;
      color: transparent;
      animation: bgp 3s infinite linear;
    }

    .title {
      flex: 2;
      height: 60%;
      display: flex;
      align-items: center;
      padding: 0 6%;

      .he {
        height: 100%;
        background: linear-gradient(to left, #2c4daa, #2c4daa) left top
            no-repeat,
          linear-gradient(to bottom, #2c4daa, #2c4daa) left top no-repeat,
          linear-gradient(to left, #2c4daa, #2c4daa) right top no-repeat,
          linear-gradient(to bottom, #2c4daa, #2c4daa) right top no-repeat,
          linear-gradient(to left, #2c4daa, #2c4daa) left bottom no-repeat,
          linear-gradient(to bottom, #2c4daa, #2c4daa) left bottom no-repeat,
          linear-gradient(to left, #2c4daa, #2c4daa) right bottom no-repeat,
          linear-gradient(to left, #2c4daa, #2c4daa) right bottom no-repeat;
        background-size: 0.15rem 0.6rem, 0.6rem 0.15rem, 0.15rem 0.6rem,
          0.6rem 0.15rem;
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .xiang {
          font-size: 1.8rem;
          line-height: 2em;
        }

        .fugai {
          font-size: 1.3rem;
        }
      }
    }
  }

  .gequ {
    border-top: 0.0625rem solid #2c4daa;
    grid-row: 2 / span 3;

    .title {
      height: 50rem/16rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 10%;
      font-size: 20rem/16rem;
      color: #07ccff;
    }

    #gequ {
      height: calc(100% - 3.125rem);
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(120deg, #155799, #159957);
      background-size: 200% 100%;
      background-clip: text;
      color: transparent;
      animation: bgp 3s infinite linear;
    }
  }
}
</style>